<template>
  <div>
    <div><el-button type="primary" round @click="tj">添加员工信息</el-button></div>
    <div>
      <el-table :data="lst" border style="width: 100%">
        <el-table-column fixed prop="username" label="用户名" width="150">
        </el-table-column>
        <el-table-column prop="zhanghao" label="账号" width="120">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="120">
        </el-table-column>
        <el-table-column prop="mail" label="邮箱" width="200">
        </el-table-column>
        <el-table-column prop="department" label="所属部门" width="120">
        </el-table-column>
        <el-table-column prop="rank" label="所属职级" width="120"> </el-table-column>
        <el-table-column prop="role" label="所属角色" width="120">
        </el-table-column>
        <el-table-column prop="post" label="所属岗位" width="120">
        </el-table-column>
        <el-table-column prop="state" label="员工状态" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.id)" type="text" size="small"
              >修改</el-button>
            <el-button @click="sc(scope.row.id)" type="text" size="small"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
        <el-drawer
            title="添加员工信息"
            :visible.sync="drawer"
            direction="rtl">
            <span>用户名:<input v-model="obj.username"/></span><br>
            <span>账号:<input v-model="obj.zhanghao"/></span><br>
            <span>密码:<input v-model="obj.password"/></span><br>
            <span>手机号:<input v-model="obj.mobile"/></span><br>
            <span>邮箱:<input v-model="obj.mail"/></span><br>
            <span>部门:
                <el-select v-model="obj.department_id" placeholder="请选择部门">
                    <el-option
                    v-for="item in lst1"
                    :key="item.id"
                    :label="item.dname"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
            <span>职级:
                <el-select v-model="obj.rank_id" placeholder="请选择职级">
                    <el-option
                    v-for="item in lst2"
                    :key="item.id"
                    :label="item.rname"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
            <span>角色:
                <el-select v-model="obj.role_id" placeholder="请选择角色">
                    <el-option
                    v-for="item in lst3"
                    :key="item.id"
                    :label="item.roname"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
            <span>岗位:
                <el-select v-model="obj.post_id" placeholder="请选择岗位">
                    <el-option
                    v-for="item in lst4"
                    :key="item.id"
                    :label="item.pname"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
            <span>状态:
                <el-select v-model="obj.state" placeholder="请选择状态">
                    <el-option
                    v-for="item in list1"
                    :key="item.id"
                    :label="item.state"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
            <span><el-button @click="add">确认添加</el-button></span>
        </el-drawer>
    </div>
    <div>
        <el-drawer
            title="修改员工信息"
            :visible.sync="drawer1"
            direction="rtl">
            <span>用户名:<input v-model="obj1.username"/></span><br>
            <span>账号:<input v-model="obj1.zhanghao"/></span><br>
            <span>手机号:<input v-model="obj1.mobile"/></span><br>
            <span>邮箱:<input v-model="obj1.mail"/></span><br>
            <span>部门:
                <el-select v-model="obj1.department_id" placeholder="请选择部门">
                    <el-option
                    v-for="item in lst1"
                    :key="item.id"
                    :label="item.dname"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
            <span>职级:
                <el-select v-model="obj1.rank_id" placeholder="请选择职级">
                    <el-option
                    v-for="item in lst2"
                    :key="item.id"
                    :label="item.rname"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
            <span>角色:
                <el-select v-model="obj1.role_id" placeholder="请选择角色">
                    <el-option
                    v-for="item in lst3"
                    :key="item.id"
                    :label="item.roname"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
            <span>岗位:
                <el-select v-model="obj1.post_id" placeholder="请选择岗位">
                    <el-option
                    v-for="item in lst4"
                    :key="item.id"
                    :label="item.pname"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
            <span>状态:
                <el-select v-model="obj1.state" placeholder="请选择状态">
                    <el-option
                    v-for="item in list1"
                    :key="item.id"
                    :label="item.state"
                    :value="item.id">
                    </el-option>
                </el-select>    
            </span><br>
            <span><el-button @click="xg(obj1.id)">确认修改</el-button></span>
        </el-drawer>
    </div>
  </div>
</template>

<script>
export default {
  name: "UsersView",
  data() {
    return {
      lst: [],
      lst1:[],
      lst2:[],
      lst3:[],
      lst4:[],
      drawer:false,
      drawer1:false,
      obj:{
        username:'',
        zhanghao:'',
        password:'',
        mobile:'',
        mail:'',
        department_id:'',
        rank_id:'',
        role_id:'',
        post_id:'',
        state:'',
      },
      obj1:{
        id:'',
        username:'',
        zhanghao:'',
        mobile:'',
        mail:'',
        department_id:'',
        rank_id:'',
        role_id:'',
        post_id:'',
        state:'',
      },
      list1:[
        {"id":"","state":"在职"},
        {"id":"2","state":"出差"},
        {"id":"3","state":"请假"}
    ],
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    this.Users();
    this.Department();
    this.Rank();
    this.Role();
    this.Post();
  },

  beforeDestroy() {},

  methods: {
    //用户
    Users() {
      this.$axios.get("/users/api/v1/user/").then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
          this.lst = resp.data.data;
        }
      });
    },
    //部门
    Department(){
        this.$axios.get("/users/api/v1/department/").then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
          this.lst1 = resp.data.data;
        }
      });
    },
    //职级
    Rank(){
        this.$axios.get("/users/api/v1/rank/").then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
          this.lst2 = resp.data.data;
        }
      });
    },
    //角色
    Role(){
        this.$axios.get("/users/api/v1/role/").then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
          this.lst3 = resp.data.data;
        }
      });
    },
    //岗位
    Post(){
        this.$axios.get("/users/api/v1/posts/").then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
          this.lst4 = resp.data.data;
        }
      });
    },
    handleClick(id){
        alert(id)
    },
    tj(){
        this.drawer = true
    },
    add(){
        this.$axios.post("/users/api/v1/user/",this.obj).then((resp) => {
        console.log(resp);
        if (resp.data.code == 201) {
          alert(resp.data.msg)
          this.Users()
          this.drawer = false
        }else{
            alert(resp.data.msg)
        }
      });
    },
    handleClick(id){
        this.drawer1 = true
        this.$axios.get("/users/api/v1/user_info/"+id+"/").then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
            this.obj1 = resp.data.data
        }
      });
    },
    xg(id){
        this.$axios.put("/users/api/v1/user_info/"+id+"/",this.obj1).then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
            alert(resp.data.msg)
            this.drawer1 = false
            this.Users()
        }
      });
    },
    sc(id){
        this.$axios.delete("/users/api/v1/user_info/"+id+"/").then((resp) => {
        console.log(resp);
        if (resp.data.code == 200) {
            alert(resp.data.msg)
            this.Users()
        }
      });
    }
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped lang="scss"></style>
